@extends('common.admin_template')

@section('content')
    <div class="boxWidth">
        @include('common.notice_msg')
        <div class="row">
            <div class="col-xs-7 boxPaddingLeft">
                <div class="addFormItemHead">添加新表单模版</div>
                <form method="post" action="{{url('admin/formitem/save')}}">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="addInput" id="formNameBox">
                    <div class="addInputText">表单名称</div>
                    <input type="text" class="form-control" id="formName" name="FormItem[name]">
                    <div class="addInputNotice">请输入表单模版名称</div>
                </div>
                <div class="addInput">
                    <div class="addInputText formChangeItem">表单项目
                        <div class="f_r dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                添加
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li id="addTitle"><a href="#">分段标题</a></li>
                                <li id="addText"><a href="#">文本</a></li>
                                <li id="addArea"><a href="#">文本框</a></li>
                                <li id="addTime"><a href="#">日期</a></li>
                                <li id="addMin"><a href="#">时间</a></li>
                                <li id="addSelect"><a href="#">选项</a></li>
                                <li id="addPhone"><a href="#">手机验证</a></li>
                            </ul>
                        </div>
                        <div class="f_r dropdown" id="delInput">
                            <button class="btn btn-default dropdown-toggle" type="button">
                                删除
                            </button>
                        </div>
                    </div>
                    <div id="formArr">
                        <div class="row">
                            <div class="col-xs-2">类型</div>
                            <div class="col-xs-4">名称</div>
                            <div class="col-xs-6">简介 / 值</div>
                        </div>
                    </div>
                    <div class="addInputNotice">请输入表单项目名，可点击"删除"或"添加"改变项目数量</div>
                </div>
                <div class="addInput"><button class="btn btn-primary addInputBtn" type="submit" id="formSubmit">添加新表单模版</button></div>
                </form>
            </div>
            <div class="col-xs-5 boxPaddingRight">
                <table class="table table-hover adminTableBg">
                    <thead>
                    <tr>
                        <th class="oneTd">名称</th>
                        <th class="threeTd">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($formItems as $item)
                    <tr>
                        <th class="oneTd itemTd">{{$item->name}}</th>
                        <th class="threeTd itemTd">
                            <a href="{{url('admin/formitem/edit',['id' => $item->id])}}"><span id="addInput">修改</span></a>
                            <a href="{{url('admin/formitem/del',['id' => $item->id])}}"><span class="redColor" id="delInput" onclick="if(!confirm('是否确认删除？'))return false">删除</span></a>
                        </th>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="pull-right">
                    {{$formItems->render()}}
                </div>
            </div>
        </div>
    </div>
@stop
@section('js')
    <script>
        (function () {
        var formArr = $('#formArr');

        $('#addText').on('click',function () {
            formArr.append('<div class="row">' +
                    '<div class="col-xs-2">文本<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="text"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addTitle').on('click',function () {
            formArr.append('<div class="row">' +
                '<div class="col-xs-2">分段标题<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="title"></div>' +
                '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入标题" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addArea').on('click',function () {
            formArr.append('<div class="row">' +
                    '<div class="col-xs-2">文本框<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="textarea"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addTime').on('click',function () {
            formArr.append('<div class="row">' +
                    '<div class="col-xs-2">日期<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="time"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addMin').on('click',function () {
            formArr.append('<div class="row">' +
                '<div class="col-xs-2">时间<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="min"></div>' +
                '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addSelect').on('click',function () {
            formArr.append('<div class="row">' +
                    '<div class="col-xs-2">选项<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="picker"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" placeholder="请输入选项值以空格间隔" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
        });
        $('#addPhone').on('click',function () {
            formArr.append('<div class="row">' +
                    '<div class="col-xs-2">手机验证<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="phone"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']" value="手机号"></div></div>' +
                    '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]" value="请输入您的手机号"></div>');
        });
        $('#delInput').on('click',function () {
            if($('#formArr .row').length>1){
                $('#formArr .row')[$('#formArr .row').length-1].remove();
            }else{
                alert('无可删除选项')
            }
        });
        $('#formSubmit').on('click',function (e) {
            var sub = 0;
            if(!$('#formName').val().replace(/(^\s*)|(\s*$)/g, "")){
                $('#formNameBox').addClass('has-error');
                sub = 1;
            }
            var formArrInput = $('#formArr .row');
            for(var i=0;i<formArrInput.length-1;i++){
                if(!$('#FormItem_'+i).val().replace(/(^\s*)|(\s*$)/g, "")){
                    $('#FormItem_'+i+'_box').addClass('has-error');
                    sub = 1;
                }
            }
            if(sub){
                e.preventDefault();
            }
        })
        })();
    </script>
@stop